import React, { useState } from 'react';
import { 
  FormInput, 
  Modal,
  CuboxButton, 
  CuboxInput, 
  CuboxModal 
} from './ui';

const CuboxDemo = () => {
  const [showStandardModal, setShowStandardModal] = useState(false);
  const [showCuboxModal, setShowCuboxModal] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">Cubox Design System Demo</h1>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Standard CSS Components */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Standard CSS Components</h2>
            <p className="text-gray-600 mb-6">Using traditional CSS border-radius for rounded corners</p>
            
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-gray-700 mb-2">Buttons</h3>
                <div className="flex space-x-3">
                  <CuboxButton width={140}>Primary</CuboxButton>
                  <CuboxButton variant="secondary" width={140}>Secondary</CuboxButton>
                  <CuboxButton variant="danger" width={140}>Danger</CuboxButton>
                </div>
              </div>
              
              <div>
                <h3 className="text-sm font-medium text-gray-700 mb-2">Inputs</h3>
                <FormInput
                  label="Name"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  placeholder="Enter your name"
                />
              </div>
              
              <div>
                <CuboxButton onClick={() => setShowStandardModal(true)} width={140}>
                  Open Standard Modal
                </CuboxButton>
              </div>
            </div>
          </div>

          {/* Cubox Components */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Cubox Components</h2>
            <p className="text-gray-600 mb-6">Using cubic bezier curves for smoother rounded corners</p>
            
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-gray-700 mb-2">Buttons</h3>
                <div className="flex space-x-3">
                  <CuboxButton>Primary</CuboxButton>
                  <CuboxButton variant="secondary">Secondary</CuboxButton>
                  <CuboxButton variant="danger">Danger</CuboxButton>
                </div>
              </div>
              
              <div>
                <h3 className="text-sm font-medium text-gray-700 mb-2">Inputs</h3>
                <CuboxInput
                  label="Name"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  placeholder="Enter your name"
                />
              </div>
              
              <div>
                <CuboxButton onClick={() => setShowCuboxModal(true)}>
                  Open Cubox Modal
                </CuboxButton>
              </div>
            </div>
          </div>
        </div>

        {/* Technical Details */}
        <div className="mt-8 bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">Technical Comparison</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">CSS Border-Radius</h3>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Simple implementation</li>
                <li>• Good browser support</li>
                <li>• Limited curve control</li>
                <li>• Sharp transitions</li>
                <li>• Less visually appealing</li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">Cubic Bezier Curves</h3>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Smooth transitions</li>
                <li>• Precise curve control</li>
                <li>• Professional appearance</li>
                <li>• Customizable corner types</li>
                <li>• Better visual hierarchy</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Standard Modal */}
      <Modal
        isOpen={showStandardModal}
        onClose={() => setShowStandardModal(false)}
        title="Standard CSS Modal"
      >
        <div className="space-y-4">
          <p className="text-gray-600">
            This modal uses traditional CSS border-radius for rounded corners.
          </p>
          <div className="flex justify-end space-x-3">
            <CuboxButton variant="secondary" onClick={() => setShowStandardModal(false)} width={140}>
              Close
            </CuboxButton>
          </div>
        </div>
      </Modal>

      {/* Cubox Modal */}
      <CuboxModal
        isOpen={showCuboxModal}
        onClose={() => setShowCuboxModal(false)}
        title="Cubox Modal"
        cornerRadius={20}
      >
        <div className="space-y-4">
          <p className="text-gray-600">
            This modal uses cubic bezier curves for much smoother rounded corners.
          </p>
          <div className="flex justify-end space-x-3">
            <CuboxButton variant="secondary" onClick={() => setShowCuboxModal(false)}>
              Close
            </CuboxButton>
          </div>
        </div>
      </CuboxModal>
    </div>
  );
};

export default CuboxDemo; 